<template>
	<view class="main">
		<view class="book">
			<image class="book-light-small" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-index-bookLight-small.png" mode=""></image>
			<image class="book-light-big" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-index-bookLight-big.png" mode=""></image>
			<image class="big-book" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-index-book.png" mode=""></image>
		</view>
		<image class="main-light" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-index-mainLight.png" mode=""></image>
		<image class="index-light" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-indexLight.png"></image>
		<view class="books">
			<image class="book1" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/book1.png"></image>
			<image class="book2" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/book2.png"></image>
			<image class="book3" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/book3.png"></image>
			<image class="book4" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/book4.png"></image>
			<image class="book5" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/book5.png"></image>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	onShow(()=>{
		setTimeout(()=>{
			uni.redirectTo({
				url:'/pages/teacher/start/start'
			})
		},2000)
	})
</script>

<style scoped lang="scss">
	.main{
		width: 100%;
		height: 100%;
		background: url(http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-index.png) no-repeat;
		background-size: 100% 100%;
	}
	.book{
		width: 100%;
		height: 256rpx;
		position: absolute;
		bottom: 18%;
	}
	.big-book{
		width: 100%;
		height: 100%;
	}
	.book-light-small{
		width:100%;
		position: absolute;
		bottom: 0rpx;
	}
	.book-light-big{
		width: 100%;
		height: 900rpx;
		position: absolute;
		bottom: -50rpx;
		opacity: 0.5;
	}
	.main-light{
		width: 600rpx;
		height: 600rpx;
		position: absolute;
		top: 25vh;
		left: 10rpx;
	}
	.index-light{
		width: 100%;
		height: 70vh;
		position: absolute;
		bottom: 0rpx;
		opacity: 0.7;
	}
	.books{
		width: 100%;
		height: 50vh;
		position: absolute;
		box-sizing: border-box;
		top: 15%;
		.book1{
			width: 202rpx;
			height: 158rpx;
			position: absolute;
			left: 11%;
		}
		.book2{
			width: 104rpx;
			height: 160rpx;
			position: absolute;
			right: 15%;
			top: 10%;
		}
		.book3{
			width: 154rpx;
			height: 120rpx;
			position: absolute;
			left: 13%;
			top: 42%;
		}
		.book4{
			width: 84rpx;
			height: 138rpx;
			position: absolute;
			right: 20%;
			top: 50%;
		}
		.book5{
			width: 84rpx;
			height: 108rpx;
			position: absolute;
			left: 35%;
			bottom: 10%;
		}
		
	}
</style>
